import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
/*
 * @Author: 小胖沱 1643200914@qq.com
 * @Date: 2022-12-19 13:15:26
 * @LastEditors: 小胖沱 1643200914@qq.com
 * @LastEditTime: 2023-01-04 16:28:27
 * @FilePath: \jk_sort_front\src\pages\QueryReport\ProductionBroad\components\VoucherProduction.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { Progress } from 'antd';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import styles from './voucherProduction.module.less';
const headers = [
    { label: '上架' },
    { label: '大烫' },
    { label: '复查' },
    { label: '包装' }
];
export default (props) => {
    const { data } = props;
    const yieldTable = useRef();
    const containerRef = useRef();
    const [cWidth, setCWidth] = useState(0);
    const [cHeight, setCHeight] = useState(0);
    // 产量表格滚动
    useEffect(() => {
        if (yieldTable && yieldTable.current) {
            const target = yieldTable.current;
            setInterval(() => {
                target.scrollTop += 1;
                if (target.scrollTop >= target.scrollHeight - target.clientHeight) {
                    target.scrollTop = 0;
                }
            }, 64);
        }
    }, [yieldTable]);
    useLayoutEffect(() => {
        if (containerRef.current) {
            const containerWidth = containerRef.current.clientWidth;
            const containerHeight = containerRef.current.clientHeight;
            setCWidth(containerWidth);
            setCHeight(containerHeight);
        }
    }, []);
    useEffect(() => {
        window.addEventListener('resize', () => {
            const containerWidth = containerRef.current.clientWidth;
            const containerHeight = containerRef.current.clientHeight;
            setCWidth(containerWidth);
            setCHeight(containerHeight);
        });
    }, [cWidth]);
    return (_jsxs("div", { className: styles.chartContainer, ref: containerRef, children: [_jsxs("header", { className: styles.voucherHeader, children: ["\u751F\u4EA7\u4E2D\u5236\u5355\u6570\u91CF\uFF1A", data?.length || 0] }), _jsxs("header", { className: styles.chartRow, children: [_jsx("div", { className: styles.chartWidth, children: "\u5236\u5355\u6B3E\u53F7" }), headers.map((header) => (_jsx("div", { className: styles.chartCol, children: header.label }, header.label)))] }), _jsx("div", { className: styles.circleBox, id: "scrollRank", ref: yieldTable, children: data &&
                    data.map((d) => {
                        const { styleAmount, collectClothesAmount, ironAmount, packAmount, reviewAmount } = d;
                        const putOn = Math.round((collectClothesAmount / styleAmount) * 100); //上架
                        const putOnColor = putOn < 50
                            ? '#DD2A2A'
                            : putOn >= 50 && putOn < 80
                                ? '#F7B500'
                                : '#44D7B6';
                        const iron = Math.round((ironAmount / styleAmount) * 100); //大烫
                        const ironColor = iron < 50
                            ? '#DD2A2A'
                            : iron >= 50 && iron < 80
                                ? '#F7B500'
                                : '#44D7B6';
                        const review = Math.round((reviewAmount / styleAmount) * 100); //复查
                        const reviewColor = review < 50
                            ? '#DD2A2A'
                            : review >= 50 && review < 80
                                ? '#F7B500'
                                : '#44D7B6';
                        const pack = Math.round((packAmount / styleAmount) * 100); //宝子
                        const packColor = pack < 50
                            ? '#DD2A2A'
                            : pack >= 50 && pack < 80
                                ? '#F7B500'
                                : '#44D7B6';
                        return (_jsxs("div", { className: styles.circleCol, children: [_jsxs("div", { className: styles.chartWidth, children: [d.styleCode, " ", d.productCode ? `（${d.productCode}）` : ''] }), _jsx("div", { className: styles.chartCol2, children: _jsx(Progress, { width: 0.12 * cWidth, type: "circle", strokeWidth: 12, strokeLinecap: 'square', percent: putOn, strokeColor: putOnColor, trailColor: "#072C88", format: () => {
                                            return (_jsxs("div", { className: styles.percent, children: [_jsxs("div", { className: styles.percentCount, children: [putOn, "%"] }), _jsx("div", { className: styles.percentText, children: "\u5B8C\u6210\u7387" })] }));
                                        } }) }), _jsx("div", { className: styles.chartCol2, children: _jsx(Progress, { width: 0.12 * cWidth, type: "circle", strokeWidth: 16, strokeColor: ironColor, trailColor: "#072C88", strokeLinecap: 'square', percent: iron, format: () => {
                                            return (_jsxs("div", { className: styles.percent, children: [_jsxs("div", { className: styles.percentCount, children: [iron, "%"] }), _jsx("div", { className: styles.percentText, children: "\u5B8C\u6210\u7387" })] }));
                                        } }) }), _jsx("div", { className: styles.chartCol2, children: _jsx(Progress, { width: 0.12 * cWidth, type: "circle", strokeWidth: 16, strokeLinecap: 'square', strokeColor: reviewColor, trailColor: "#072C88", percent: review, format: () => {
                                            return (_jsxs("div", { className: styles.percent, children: [_jsxs("div", { className: styles.percentCount, children: [review, "%"] }), _jsx("div", { className: styles.percentText, children: "\u5B8C\u6210\u7387" })] }));
                                        } }) }), _jsx("div", { className: styles.chartCol2, children: _jsx(Progress, { width: 0.12 * cWidth, type: "circle", strokeWidth: 16, strokeLinecap: 'square', strokeColor: packColor, trailColor: "#072C88", percent: pack, format: () => {
                                            return (_jsxs("div", { className: styles.percent, children: [_jsxs("div", { className: styles.percentCount, children: [pack, "%"] }), _jsx("div", { className: styles.percentText, children: "\u5B8C\u6210\u7387" })] }));
                                        } }) })] }, d.styleId));
                    }) })] }));
};
